<template>
  <view class="login-page">
    <view class="card-container">
      <!-- 顶部区域 -->
      <view class="header-section">
        <text class="title">登录您的账户</text>
        <text class="subtitle">请输入您的凭据或使用社交媒体登录</text>
      </view>

      <!-- 核心登录表单 -->
      <view class="form-section">
        <view class="input-group">
          <text class="label">电子邮件/用户名</text>
          <input class="input" type="text" placeholder="请输入您的电子邮件或用户名" v-model="username" />
        </view>

        <view class="input-group password-group">
          <text class="label">密码</text>
          <input class="input" :type="passwordVisible ? 'text' : 'password'" placeholder="请输入您的密码" v-model="pass" />
          <text class="password-toggle" @click="togglePasswordVisibility">
            {{ passwordVisible ? '隐藏' : '显示' }}
          </text>
        </view>
				<navigator url="/pages/forgot/forgot" hover-class="navigator-hover">
					<button type="default"><text class="forgot-password" @click="goToForgotPassword">忘记密码？</text></button>
				</navigator>
        

        <button class="login-button" :disabled="loading" @click="denglu">
          {{ loading ? '登录中...' : '登录' }}
        </button>
		<!-- <button type="button" @click="denglu">测试</button> -->
      </view>

      <!-- 分隔线 -->
      <view class="separator-container">
        <view class="separator-line"></view>
        <text class="separator-text">或使用以下方式登录</text>
        <view class="separator-line"></view>
      </view>

      <!-- 社交媒体登录选项 -->
      <view class="social-login-section">
        <button class="social-button google" @click="socialLogin('Google')">
          <text class="icon">G</text> 使用 Google 登录
        </button>
        <button class="social-button facebook" @click="socialLogin('Facebook')">
          <text class="icon">f</text> 使用 Facebook 登录
        </button>
        <button class="social-button apple" @click="socialLogin('Apple')">
          <text class="icon"></text> 使用 Apple 登录
        </button>
        <button class="social-button github" @click="socialLogin('GitHub')">
          <text class="icon">🐙</text> 使用 GitHub 登录
        </button>
      </view>

      <!-- 底部区域 -->
      <view class="footer-section">
        <text class="register-text">还没有账户？</text>
		<!-- huilder的路由跳转，相当于<route-push></route-pust>地址即在hbuilder的路由规则前加/即可，有当前页面打开，也有跳转转到新页面的选项
		 				<navigator url="redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">
		 					<button type="default">在当前页打开</button>
		 				</navigator>
		 				<navigator url="/pages/tabBar/extUI/extUI" open-type="switchTab" hover-class="other-navigator-hover">
		 					<button type="default">跳转tab页面</button>
		 				</navigator>
		 -->
		<navigator url="/pages/zhuce/zhuce" hover-class="navigator-hover">
			<button type="default"><text class="register-link" @click="goToRegister">立即注册</text></button>
		</navigator>
        
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';


const username = ref('');
const pass = ref('');
const passwordVisible = ref(false);
const loading = ref(false);

const togglePasswordVisibility = () => {
  passwordVisible.value = !passwordVisible.value;
};

// const handleLogin = () => {
//   loading.value = true;
//   // 模拟登录请求
//   setTimeout(() => {
//     console.log('登录信息:', { email: email.value, password: password.value });
//     uni.showToast({
//       title: '登录成功 (模拟)',
//       icon: 'none'
//     });
//     loading.value = false;
//     // 实际应用中，这里会处理登录逻辑和页面跳转
//   }, 1500);
// };

const socialLogin = (provider) => {
  uni.showToast({
    title: `使用 ${provider} 登录 (模拟)`,
    icon: 'none'
  });
  console.log(`尝试使用 ${provider} 登录`);
  // 实际应用中，这里会调用对应的社交媒体登录 SDK
};

const goToForgotPassword = () => {
  uni.showToast({
    title: '跳转到忘记密码页面 (模拟)',
    icon: 'none'
  });
  console.log('跳转到忘记密码页面');
  // 实际应用中，这里会使用 uni.navigateTo 跳转
};

const goToRegister = () => {
  uni.showToast({
    title: '跳转到注册页面 (模拟)',
    icon: 'none'
  });
  console.log('跳转到注册页面');
  // 实际应用中，这里会使用 uni.navigateTo 跳转
};

function denglu() {
	loading.value = true;
  uni.request({
    url: 'http://localhost:8080/login',
	// method:"POST",
    data: {
      name: username.value,
      pass: pass.value
    },
    success: (res) => {
      setTimeout(() => {
        // 修正为实际的响应式数据
        // console.log('登录信息:', { name: username.value, pass: pass.value });
//用于在指定的延迟时间后执行回调函数。它的作用是模拟网络请求的延迟，增强用户体验。也就是登录时会有时间间隔
        loading.value = false;
      }, 1500);
	  if(res.data==1){
	  uni.showToast({
	    title: '登录成功',
	    icon: 'none'
	  });
		  
	  setTimeout(()=>{
		  uni.navigateTo({
		  	url: '/pages/dat/dat' // 注册成功后跳转到登录页面
		  });
	  },1500)
	  }else{
		uni.showToast({
		  title: '登录失败',
		  icon: 'none'
		});
	}
      
    }
  });
}
</script>

<style scoped>
.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f2f5; /* 柔和的浅灰色背景 */
  padding: 20rpx; /* 适应小屏幕 */
  box-sizing: border-box;
}

.card-container {
  width: 100%;
  max-width: 600rpx; /* 最大宽度 */
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1); /* 轻微阴影 */
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  gap: 30rpx; /* 元素间距 */
}

.header-section {
  text-align: center;
  margin-bottom: 20rpx;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 10rpx;
  display: block; /* text 默认是 inline */
}

.subtitle {
  font-size: 28rpx;
  color: #666666;
  display: block;
}

.form-section {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.input-group {
  display: flex;
  flex-direction: column;
  position: relative;
}

.label {
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 8rpx;
}

.input {
  width: 100%;
  height: 80rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 30rpx;
  color: #333333;
  box-sizing: border-box; /* 确保 padding 不会增加宽度 */
}

.input:focus {
  border-color: #007aff; /* 焦点时的边框颜色 */
  outline: none;
}

.password-group .password-toggle {
  position: absolute;
  right: 20rpx;
  top: 50%; /* 调整到输入框中间 */
  transform: translateY(10rpx); /* 调整到输入框中间 */
  font-size: 28rpx;
  color: #007aff;
  cursor: pointer;
  z-index: 1; /* 确保在输入框之上 */
}

.forgot-password {
  text-align: right;
  font-size: 28rpx;
  color: #007aff;
  text-decoration: underline;
  margin-top: -10rpx; /* 调整与上方输入框的间距 */
}

.login-button {
  width: 100%;
  height: 90rpx;
  background-color: #007aff; /* 主色调 */
  color: #ffffff;
  font-size: 32rpx;
  font-weight: bold;
  border-radius: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20rpx;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.login-button[disabled] {
  opacity: 0.7;
}

.separator-container {
  display: flex;
  align-items: center;
  margin: 30rpx 0;
}

.separator-line {
  flex: 1;
  height: 2rpx;
  background-color: #e0e0e0;
}

.separator-text {
  font-size: 28rpx;
  color: #999999;
  margin: 0 20rpx;
  white-space: nowrap; /* 防止文字换行 */
}

.social-login-section {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.social-button {
  width: 100%;
  height: 90rpx;
  border-radius: 10rpx;
  font-size: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15rpx;
  border: 2rpx solid #e0e0e0; /* 统一边框 */
  background-color: #ffffff; /* 统一背景色 */
  color: #333333; /* 统一文字颜色 */
}

/* 社交按钮的特定样式，用于图标颜色或背景 */
.social-button .icon {
  font-size: 36rpx; /* 图标大小 */
  font-weight: bold;
}

.social-button.google .icon {
  color: #db4437; /* Google 红色 */
}
.social-button.facebook .icon {
  color: #1877f2; /* Facebook 蓝色 */
}
.social-button.apple .icon {
  color: #000000; /* Apple 黑色 */
}
.social-button.github .icon {
  color: #333333; /* GitHub 黑色 */
}

.footer-section {
  text-align: center;
  margin-top: 30rpx;
}

.register-text {
  font-size: 28rpx;
  color: #666666;
}

.register-link {
  font-size: 28rpx;
  color: #007aff;
  text-decoration: underline;
  margin-left: 10rpx;
}
</style>
